<template>
	<view :class="[`${PREFIX}`]">
		<view :class="[`${PREFIX}-top`]">
			<image :class="[`${PREFIX}-top-avatar`]" src="" mode=""></image>
			<view :class="[`${PREFIX}-top-lines`]">
				<view :class="[`${PREFIX}-top-lines-line1`]">
					name
					<!-- 认证 -->
					<image src="../../../static/common/authentication.png" :class="[`${PREFIX}-top-lines-line1-authentication`]" mode=""></image>
					<!-- vip -->
					<image src="../../../static/common/vip.png" :class="[`${PREFIX}-top-lines-line1-vip`]" mode=""></image>
				</view>
				<view :class="[`${PREFIX}-top-lines-line2`]">
					<!-- 男 -->
					<image src="../../../static/common/male.png" mode=""></image>
					<!-- 女 -->
					<image src="../../../static/common/female.png" mode=""></image>
					<view :class="[`${PREFIX}-top-lines-line2-text`]">24/155cm/50kg• 上海</view>
				</view>
			</view>
		</view>
		<view :class="[`${PREFIX}-bottom`]">
			本人河南禹州88年身高170CM 体重53K上课的反馈水电费
		</view>
		<image v-if="showSelect" :class="[`${PREFIX}-select`]" src="/static/common/s2.png" mode=""></image>
	</view>
</template>

<script>
	const PREFIX = 'friends-friend'
	export default {
		data() {
			return {
				PREFIX
			}
		},
		props: {
			showSelect: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style lang="less">
	.friends-friend {
		padding: 0 64rpx 0 50rpx;
		border-bottom: 1rpx solid #DDDDDD;
		position: relative;

		&-top {
			display: flex;
			padding: 44rpx 0;

			&-avatar {
				width: 92rpx;
				height: 92rpx;
				background: blue;
				flex-shrink: 0;
				margin-right: 28rpx;
			}

			&-lines {
				&-line1 {
					height: 48rpx;
					color: #333333;
					font-size: 48rpx;
					font-weight: 0;
					line-height: 48rpx;

					image {
						height: 33rpx;
						margin-left: 4rpx;
					}
					&-authentication {
						width: 104rpx;
					}
					&-vip {
						width: 95rpx;
					}
				}

				&-line2 {
					display: flex;
					align-items: center;

					image {
						width: 35rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					&-text {
						height: 40rpx;
						color: #999999;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}

		&-bottom {
			width: 622rpx;
			height: 40rpx;
			color: #919191;
			font-size: 28rpx;
			line-height: 40rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-bottom: 32rpx;
		}

		&-select {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 50rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>